<template>
  <div class="page-class">
    <Breadcrumb />
    <div class="cnt-class">
      <div class="query">
        <a-row>
          <a-col :span="6">
            <a-input-search
              v-model.trim="userName"
              :maxLength="50"
              allowClear
              placeholder="请输入小区名称"
              @search="onSearch"
            >
              <a-button slot="enterButton" type="primary"> 搜索 </a-button>
            </a-input-search>
          </a-col>
        </a-row>
      </div>
      <div class="table">
        <BaseTable
          ref="table"
          rowKey="id"
          :scroll="{ y: 540 }"
          :loading="loading"
          :columns="columns"
          :dataSource="list"
          :hideSelect="true"
          @change="getList"
        ></BaseTable>
      </div>
    </div>
  </div>
</template>
<script>
import BaseTable from "@/components/BaseTable";
import httpApi from "@/api/log";

export default {
  components: {
    BaseTable
  },
  data() {
    return {
      loading: false,
      time: -1,
      userName: undefined,
      list: [],
      columns: [
        {
          title: "小区名称",
          dataIndex: "userNo",
          ellipsis: true
        },
        {
          title: "小区地址",
          dataIndex: "userName",
          ellipsis: true
        },
        {
          title: "总户数",
          dataIndex: "type",
          ellipsis: true
        },
        {
          title: "已认证",
          dataIndex: "mobile",
          ellipsis: true
        },
        {
          title: "待认证",
          dataIndex: "type",
          ellipsis: true
        },
        {
          title: "创建人",
          dataIndex: "mobile",
          ellipsis: true
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          ellipsis: true
        },
        {
          title: "操作",
          eclipse: true,
          customRender: (v, row) => {
            return (
              <div class="operate-td">
                <a onClick={() => this.handleExport(row)}>导出待认证</a>
                <a-divider type="vertical" />
                <a onClick={() => this.handleShow(row)}>查看楼宇</a>
              </div>
            );
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onSearch() {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.getList(1);
      }, 600);
    },
    getList(current) {
      this.loading = true;
      if (current === 1) {
        this.$refs.table.pageInfo.current = 1;
      }
      httpApi
        .getList({
          userName: this.userName,
          pageNo: this.$refs.table.pageInfo.current,
          pageSize: this.$refs.table.pageInfo.pageSize
        })
        .then((res) => {
          if (res.retcode === 0) {
            this.list = res.data.records || [];
            if (this.$refs.table) {
              this.$refs.table.pageInfo.total = res.data.total;
            }
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          this.loading = false;
        });
    },
    handleExport(row) {
      this.$confirm({
        title: "导出：",
        content: () => <div class="pwd-msg">是否确定导出待认证数据?</div>,
        onOk: () => {
          httpApi
            .resetPwd({
              id: row.id
            })
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("导出成功！");
              } else {
                this.$message.error("导出失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "导出失败！");
            });
        },
        onCancel: () => {}
      });
    },
    handleShow(row) {
      //查看
      this.$router.push({
        path: "/community/floor",
        query: {
          id: row.id
        }
      });
    }
  }
};
</script>
<style scoped lang="less">
.pwd-msg {
  .font-Medium(14px,rgba(0, 0, 0, 0.65),22px,400);
}
</style>
